﻿@{
  ViewData["Title"] = "角色管理";
  ViewData["PageName"] = "rolemanage_index";
  ViewData["Heading"] = "<i class='fal fa-users text-primary'></i>  角色管理";
  ViewData["Category1"] = "系统管理";
  ViewData["PageDescription"] = "";
}
@section HeadBlock{
<style>
  .badge {
    font-size: 100%;
  }
  .badge .close {
    margin-left: 0.25rem;
    color: inherit;
    font-size: 100%;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  }
</style>

 }
<div class="row">
  <div class="col-md-3">
    <div class="card border  m-auto m-lg-0">
      <div class="card-header bg-trans-gradient py-2 pr-2 d-flex align-items-center flex-wrap">
        <!-- we wrap header title inside a span tag with utility padding -->
        <div class="card-title text-white">角色</div>
        <div class="d-flex position-relative ml-auto">
          <button id="addrolesbutton" type="button" class="btn  btn-info ml-2 waves-effect waves-themed">
            <i class="fal fa-users"></i> 新增
          </button>
        </div>
      </div>
      <ul class="list-group list-group-flush">
        @foreach (var role in ViewBag.roles)
        {
          <li class="list-group-item d-flex">
            <div class="flex-grow-1 align-self-center"> @role.Name </div>
            <a href="javascript:removeRole('@role.Name');" class="btn btn-danger btn-sm btn-icon waves-effect waves-themed">
              <i class="fal fa-times"></i>
            </a>
          </li>
        }
      </ul>
    </div>

  </div>
  <div class="col-md-9">
    <div class="card border  m-auto m-lg-0">
      <div class="card-header bg-trans-gradient py-2 pr-2 d-flex align-items-center flex-wrap">
        <!-- we wrap header title inside a span tag with utility padding -->
        <div class="card-title text-white">分配角色</div>

      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>账号</th>
                <th>所属角色</th>
                <th>添加角色</th>
              </tr>
            </thead>
            <tbody>
              @foreach (var user in ViewBag.userinroles)
              {
                <tr>
                  <td>@user.UserName (@user.GivenName)</td>
                  <td class="text-center align-middle">
                    @foreach (var role in user.Roles)
                    {
                      <span class="badge badge-primary">
                        @role
                        <a href="javascript:removeFromRole('@user.UserName','@role')"  title="删除角色" class="close" aria-label="Dismiss">
                          <span aria-hidden="true">&times;</span>
                        </a>
                      </span>
                    }


                  </td>
                  <td class="text-center align-middle">
                    <a href="javascript:addInRole('@user.UserName','@string.Join(",", user.Roles)');" class="btn btn-primary btn-sm btn-icon waves-effect waves-themed">
                      <i class="fal fa-plus"></i>
                    </a>

                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>

@section ScriptsBlock {
  <script src="~/js/plugin/bootbox/bootbox.locales.min.js"></script>
  <script>
    $(document).ready(function () {

      $('#addrolesbutton').click(() => {

        bootbox.prompt({
          locale:'zh_CN' ,
          size: "small",
          maxlength: 30,
          pattern: '^[\u4E00-\u9FA5a-zA-Z0-9_]{2,20}$',
          placeholder: '新角色(汉字 英文字母 数字 下划线组成，2-20位)',
          required: true,
          title: "添加新角色",
          buttons: {
           cancel: {
            label: "取消",
            className: 'btn-secondary',
           }
          },
          callback: function (result) {
            if (result != null) {
              $.get(`/RoleManage/CreateRole?name=${result}`).done(() => {
                location.reload();
              });
            }
          }
        })


      })

    })
    //删除角色
    function removeRole(roleName) {
      $.get(`/RoleManage/RemoveRole?name=${roleName}`).done(() => {
        location.reload();
      });
    }
    //添加角色
    function addInRole(userName, roles) {
 
      const value = roles.split(',');
      console.log(value);
      bootbox.prompt({
        title: "分配角色",
        locale: 'zh_CN',
        size: "small",
        value: value,
        inputType: 'checkbox',
        inputOptions: [
          @foreach(var role in ViewBag.roles)
          {
            <text>
          {
            text: '@role',
            value: '@role',
          },
            </text>
          }
          
         ],
         buttons: {
           cancel: {
            label: "取消",
            className: 'btn-secondary',
           }
          },
        callback: function (result) {
          if (result != null) {
            $.post('/RoleManage/AddToRoles', { userName: userName, roles: result }).done(() => {
              location.reload();
            });
          }
        }
      });
    }
    //移除角色
    function removeFromRole(userName, role) {

      $.post('/RoleManage/RemoveFromRole', { userName: userName, role: role }).done(() => {
        location.reload();
      });
    }
  </script>

}
